<template>
  <Chart :height="height" :option="chartOption" />
</template>

<script setup>
import Chart from "@/components/charts/index.vue";
import useChartOption from "@/hooks/charts";
import { graphic } from "echarts";
import { computed } from "vue";
import { useAppStore } from "@/pinia";
import { storeToRefs } from "pinia";

// 从父组件传递 xAxis 和 chartsData
const props = defineProps({
  height: {
    type: String,
    default: "128px",
  },
  xAxis: {
    type: Array,
    default: () => [
      "2024-1",
      "2024-2",
      "2024-3",
      "2024-4",
      "2024-5",
      "2024-6",
      "2024-7",
      "2024-8",
    ], // 默认值
  },
  chartsData: {
    type: Array,
    default: () => [12, 22, 32, 45, 32, 78, 89, 92], // 默认值
  },
});

const appStore = useAppStore();
const { config } = storeToRefs(appStore);

const dotColor = computed(() => {
  return appStore.theme === "dark" ? "#333" : "#E5E8EF";
});

const graphicFactory = (side) => {
  return {
    type: "text",
    bottom: "8",
    ...side,
    style: {
      text: "",
      textAlign: "center",
      fill: "#4E5969",
      fontSize: 12,
    },
  };
};

const graphicElements = computed(() => [
  graphicFactory({ left: "5%" }),
  graphicFactory({ right: 0 }),
]);

const { chartOption } = useChartOption(() => {
  return {
    grid: {
      left: "40",
      right: "0",
      top: "10",
      bottom: "30",
    },
    xAxis: {
      type: "category",
      offset: 2,
      data: props.xAxis, // 从 props 获取 xAxis 数据
      boundaryGap: true, // 将 boundaryGap 设置为 true 确保首尾数据可见
      axisLabel: {
        color: "#4E5969",
        formatter(value) {
          return `${value}`; // 确保每个 x 轴下标都显示
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: dotColor.value,
        },
      },
      axisPointer: {
        show: true,
        lineStyle: {
          color: `${config.value.primaryColor}FF`,
          width: 2,
        },
      },
    },
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
      },
      axisLabel: {
        formatter(value) {
          return `${value}`;
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dashed",
          color: dotColor.value,
        },
      },
    },
    tooltip: {
      trigger: "axis",
      formatter(params) {
        const [firstElement] = params;
        return `<div>
            <p class="tooltip-title">${firstElement.axisValueLabel}</p>
            <div class="content-panel"><span>总内容量</span><span class="tooltip-value">${Number(
              firstElement.value
            ).toLocaleString()}</span></div>
          </div>`;
      },
      className: "echarts-tooltip-diy",
    },
    graphic: {
      elements: graphicElements.value,
    },
    series: [
      {
        data: props.chartsData, // 从 props 获取 chartsData 数据
        type: "line",
        smooth: true,
        symbolSize: 12,
        emphasis: {
          focus: "series",
          itemStyle: {
            borderWidth: 2,
          },
        },
        lineStyle: {
          width: 3,
          color: new graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: `${config.value.primaryColor}80`,
            },
            {
              offset: 0.5,
              color: `${config.value.primaryColor}92`,
            },
            {
              offset: 1,
              color: `${config.value.primaryColor}FF`,
            },
          ]),
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: `${config.value.primaryColor}20`,
            },
            {
              offset: 1,
              color: `${config.value.primaryColor}08`,
            },
          ]),
        },
      },
    ],
  };
});
</script>

<style scoped lang="scss"></style>
